<template>
  <el-form :model="formData" size="normal">
    <el-form-item style="margin-bottom: 10px;">
      <el-input placeholder="请输入手机号" autocomplete="off" v-model="formData.username" clearable></el-input>
    </el-form-item>
    <el-form-item style="margin-bottom: 10px;">
      <el-input @keyup.enter.native="doSubmit()" autocomplete="off" placeholder="请输入密码" v-model="formData.password" show-password></el-input>
    </el-form-item>
    <!--
    <el-form-item style="margin-bottom: 10px;">
      <el-input @keyup.enter.native="doSubmit()" style="width: 225px;" placeholder="请输入图形验证码" v-model="formData.captcha"></el-input>
      <img class="code-img" @click="getCapCode()" :src="codeurl" alt="">
    </el-form-item>
    -->
    <div class="link">
      <span></span>
      <!-- <el-button type="text" @click="activeName('register')">注册</el-button> -->
      <el-tooltip :manual="true" :value="active === 'personal'" effect="dark" placement="bottom-start">
        <div slot="content" class="tip">企业为你注册好账号之后 <br>请先点这里通过手机号码设置初始密码</div>
        <el-button v-show="active === 'personal'" type="text" @click="activeName('resetpwd')">忘记 / 设置 密码</el-button>
      </el-tooltip>
    </div>
    <div>
      <el-button size="normal" type="primary" style="background: #3a58f1; border: none;" round @click="doSubmit()">登录</el-button>
    </div>
  </el-form>
</template>
<script>
export default {
  name: 'login-component',
  props: {
    active: {
      type: String,
      default: 'company'
    }
  },
  data() {
    return {
      formData: {
        username: '',
        password: '',
        captcha: undefined
      },
      cap_token: '',
      codeurl: '',
      typeEnum: {
        company: '企业',
        personal: '个人'
      }
    }
  },
  methods: {
    handleRoute () {
      //this.getCapCode()
    },
    doSubmit() {
      if (this.active === 'company') {
        this.$http.post('/company/login', {
          ...this.formData,
          captcha: this.formData.captcha,
          cap_token: this.cap_token
        }).then(res => {
          if (res.code === 0) {
            document.cookie = `token=${res.token}`
            this.$message({
              message: '登录成功！',
              type: 'success',
              center: true
            });
            this.$store.dispatch('setUserInfo', {
              role: 1,
              ...res
            })
            this.$router.push('/company/auth')
          }else{
            //this.getCapCode()
            console.log(res.message)
          }
        })
      } else if (this.active === 'personal') {
        this.$http.post('/personal/session/login', {
          username: this.formData.user_name,
          password: this.formData.user_pass,
          captcha: this.formData.captcha,
          cap_token: this.cap_token
        }).then(res => {
          if (res.status === 1) {
            this.$message({
              message: '登录成功！',
              type: 'success',
              center: true
            });
            this.$store.dispatch('setUserInfo', {
              role: 2,
              ...res.data
            })
            this.$http.get('/personal/User/procedure').then(res => {
              if (res.status === 1) {
                if (res.data.code === 0) {
                  this.$router.push('/personal/auth')
                } else {
                  this.$router.push('/personal/check')
                }
              }
            })
          }else{
            //this.getCapCode()
            console.log(res.message)
          }
        })
      }
    },
    activeName(name) {
      this.$emit('active', name)
    },
    getCapCode() {
      this.codeurl = ''
      this.cap_token = ''
      this.$http.get(this.active === 'personal' ? '/personal/session/captcha' : '/company/login/captcha').then(res => {
        if (res.status === 1 || res.code === 200) {
          this.cap_token = res.data.token
          this.codeurl = res.data.file
        }
      })
    }
  },
  watch: {
    '$route': 'handleRoute',
    active() {
      console.log(this.active)
      //this.getCapCode()
    }
  },
  mounted() {
    //this.getCapCode()
  }
}
</script>
<style lang="less" scoped>

.elRadioBox {
  width: 100%;
  height: 40px;
  margin-top: 14px;
}
.el-radio {
  color: #fff;
}
.el-input {
  width: 340px;
  max-width: 100%;
  margin-bottom: 14px;
}
.el-button {
  width: 340px;
  max-width: 100%;
}
.link {
  display: flex;
  justify-content: space-between;
  .el-button {
    width: auto;
    text-decoration: underline;
    color: #fff;
  }
}
.code-img {
  display: inline-block;
  width: 100px;
  height: 40px;
  margin-left: 10px;
  vertical-align: top;
}
</style>
